<template>
  <div class="blog">
    <el-row class="query-btn">
      <el-button type="primary" @click="handleAdd()">添加友链</el-button>
    </el-row>

    <el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="_id"
          label="编号"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="url" label="链接" />
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="createTimeMatter"
        />
        <el-table-column
          prop="updateTime"
          label="修改时间"
          :formatter="updateTimeMatter"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDel(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      />
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :title="dialog.title"
      :visible.sync="dialog.open"
      width="800px"
      top="10vh"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        :gutter="20"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input
                v-model="form.name"
                type="text"
                placeholder="请输入名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="链接" prop="url">
              <el-input
                v-model="form.url"
                type="text"
                placeholder="请输入链接"
              />
            </el-form-item>
          </el-col>
        </el-row></el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { blogAdd, blogEdit, blogGet, blogById, blogDel } from '@/api/blogRoll'
export default {
  name: 'BlogRoll',
  components: { Pagination },
  data() {
    return {
      btnType: 'add',
      isClear: false,
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10
      },
      // 总条数
      total: 0,
      // 列表数据
      tableData: [],
      // 弹窗参数
      dialog: {
        title: '新增链接',
        open: false
      },
      // 表单
      form: {},
      rules: {
        // title author sort type state
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        url: [{ required: true, message: '链接不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    createTimeMatter(item) {
      return item.createTime.replace(/T/, ' ').replace(/\..+/, '')
    },
    updateTimeMatter(item) {
      return item.createTime.replace(/T/, ' ').replace(/\..+/, '')
    },
    // 获取列表
    async getList() {
      this.loading = true
      const data = await blogGet(this.queryParams)
      if (data.code === 1) {
        this.tableData = data.data
        this.total = data.total
        this.loading = false
      }
    },
    // 新增按钮
    handleAdd() {
      this.reset()
      this.dialog.title = '新增链接'
      this.dialog.open = true
      this.btnType = 'add'
    },
    // 修改
    async handleEdit(row) {
      this.reset()
      this.dialog.title = '修改链接'
      this.dialog.open = true
      this.btnType = 'edit'
      const data = await blogById(row._id)
      if (data.code === 1) {
        this.form = data.data
      }
    },
    // 删除
    async handleDel(row) {
      this.$confirm('是否确认删除选中的友链?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return blogDel(row._id)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
        .catch(function() {
          this.msgError('删除失败')
          this.getList()
        })
    },
    // 提交表单
    submitForm() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          // 编辑
          if (this.btnType === 'edit') {
            const data = await blogEdit(this.form)
            if (data.code === 1) {
              this.msgSuccess('修改成功')
              this.dialog.open = false
              this.getList()
            } else {
              this.msgError('修改失败')
            }
          } else {
            // 新增
            const data = await blogAdd(this.form)
            if (data.code === 1) {
              this.msgSuccess('添加成功')
              this.dialog.open = false
              this.getList()
            } else {
              this.msgError('添加失败')
            }
          }
        }
      })
    },
    // 重置
    reset() {
      this.form = {}
    },
    // 取消按钮
    cancel() {
      this.dialog.open = false
      this.reset()
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.blog {
  margin: 30px;
}
.query-btn {
  margin-bottom: 20px;
}
</style>
